<template>
	<div id="home">
		<div id="nav-bar">
			<nav-bar>
				<div slot="left">
					<div id="logo" style="width: 60px;">
						<img src="../../../public/jesus.png" style="width:100%" />
					</div>
				</div>
				<div slot="center" class="center">
					<el-input id="search" style="margin-right: 15px" placeholder="请输入内容" v-model="lookfor"
						@keyup.enter.native="toSearch" />
					</el-input>
				</div>
				<div slot="right" class="right">
					<div v-for="(item,index) in route" @click="toPage(item)" :key="index">
						<span>{{txt[index]}}</span>
					</div>
					<avatar v-show="this.common.isLogin" class="avatar" @click.native="toPage('/profile')"></avatar>
					<div id="login" @click="toPage('/login')" v-show="!this.common.isLogin">
						<span>登录</span>
					</div>
					<div id="register" @click="toPage('/register')" v-show="!this.common.isLogin">
						<span>注册</span>
					</div>
				</div>
			</nav-bar>
		</div>
		
		<Main :articles="this.data" :nickname="nickname"></Main>
			<page-node @getPage="getPage" :pageSize="pageSize" :total="total"></page-node>
		<Footer>
		</Footer>
		<vue-particles class="particles-js" color="#efce11" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4"
			linesColor="#dedede" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150"
			:moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push">
		</vue-particles>
	</div>
</template>

<script>
	import NavBar from 'components/common/NavBar.vue'
	import avatar from 'components/common/avatar.vue'
	import {
		toLookfor
	} from 'network/home.js'
	import Main from 'views/home/childcomponents/main.vue'
	import {
		getHomeGoods,
		getHomem
	} from 'network/home.js'
	import Footer from 'components/common/Footer.vue'
	import pageNode from 'components/common/pageNode.vue'
	import {
		getUsers
	} from 'network/home.js'

	export default {
		name: "Home",
		components: {
			Main,
			pageNode,
			Footer,
			NavBar,
			avatar,
		},
		data() {
			return {
				total: 0, //总记录数
				pageSize: 20, //单页面大小
				lookfor: '',
				data: [],
				nickname: [],
				page: 1, //第几页
				plength: 0,
				route: ['/home', '/category', '/msg'],
				txt: ['主页', '分类', '消息']
			}

		},
		methods: {
			getPage(param1 = 1) { //param1子传过来的
				this.page = param1,
					getHomem(this.page).then(res => {
						this.data = res.data;
						this.plength = res.data.length;
						this.nickname = [];
						for (let i = 0; i < this.plength; i++)
							getUsers(this.data[i].author_id).then(res => {
								this.nickname.push(res.body.nickname)
								// console.log(this.nickname)
							})
					})
			},
			toPage(value) {
				this.$router.push(value)
			},
			toSearch() {
				toLookfor(this.lookfor).then(res => {
					this.data = res.data
				})
			}
		},
		created() {
			//多用了一个请求计算节点页数,真多余！！！
			getHomem(this.page, 1).then(res => {
				this.total = res.data.length;
			})
			getHomem(this.page, 0).then(res => {
				this.data = res.data;
				this.plength = res.data.length;
				for (let i = 0; i < this.plength; i++)
					getUsers(this.data[i].author_id).then(res => {
						this.nickname.push(res.body.nickname)
						// console.log(this.nickname)
					})
			})

		}
	}
</script>
<style scoped="scoped">
	.particles-js{
	    width: 100%;
	    height: 100%;
	    position:fixed;
	}
	#home {
		background-color: #e1e1e1;
	}

	#nav-bar {
		/* box-sizing: border-box; */
		display: flex;
		height: 80px;
		background-color: white;
		border-bottom: 1px solid #f1f1f1;
		/* box-shadow:-10px -10px 15px; */
		padding-top: 5px;
		margin-bottom: 25px;
	}

	.center {
		position: relative;
		padding: 6px;
		padding-top: 10px;
		width: 388px;
	}

	.right {
		display: flex;
		cursor: pointer;
	}

	.right>div {
		color: black;
		flex: 1;
		line-height: 60px;
	}

	.avatar {
		padding-top: 10px;
	}
</style>
